<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue应用</title>
    <script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
</head>
<body>
    <div id="demo">
        <table border="1">
            <tr>
                <th>序号</th>
                <th>名称</th>
                <th>分类</th>
                <th>操作</th>
            </tr>
            <tr v-for="todo in todos">
                <td>{{todo.num}}</td>
                <td>{{todo.name}}</td>
                <td>{{todo.classes}}</td>
                <td>
                    <a href="#" v-on:click="remove($index)">{{todo.action}}</a>
                </td>
            </tr>
        </table>
        <div id="addanimal">
        序号：<input v-model="num"><br/>
        名称：<input v-model="name"><br/>
        分类：<input v-model="classes"><br/>
        <button v-on:click="add">添加</button>
    </div>
    </div>


    <script>
        new Vue({
            el:"#demo",
            data:{
                num:"",
                name:"",
                classes:"",
                todos:[
                    {num:"1",name:"牛",classes:"哺乳动物",action:"删除"},
                    {num:"2",name:"猪",classes:"哺乳动物",action:"删除"}
                ]
            },
            methods:{
                remove:function(index){
                    /*this.todos.splice(index,1)*/
                    var _this = this;
                    _this.todos.splice(index, 1)
                },
                add:function () {
                    var num = this.num.trim();
                    var name = this.name.trim();
                    var classes = this.classes.trim();
                    console.log("num="+num+" "+name+" "+classes);
                    if(num && name && classes){
                        this.todos.push({ num: num,name:name,classes:classes,action:"删除" })
                        this.num = ''
                        this.name = ''
                        this.classes = ''
                    }
                }
            }
        })
    </script>
</body>
</html>